<template>
  <div class="set-item">
    <div class="tit">{{title}}</div>
    <div class="it">
      <a href="javascript:;" @click="set">{{color || '未设置'}}</a>
      <div class="c-box">
        <Sketch ref="vSketch" v-model="colors" v-if="isShow" tabindex="-1" @blur.native="onBlur"/>
      </div>
    </div>
  </div>
</template>

<script>
import { Sketch } from 'vue-color'
export default {
  components: {
    Sketch
  },
  props: {
    c: String,
    title: {
      type: String,
      default: '颜色设置'
    }
  },
  data () {
    return {
      colors: 'rgba(117, 255, 61, 0.64)',
      isShow: false
    }
  },
  created () {
    this.colors = this.c || ''
  },
  computed: {
    color () {
      let { colors } = this
      let { rgba } = colors
      if (rgba) {
        return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
      }
      return colors
    }
  },
  methods: {
    set () {
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.vSketch.$el.focus()
      })
    },
    onBlur () {
      this.isShow = false
    }
  },
  watch: {
    colors (v) {
      if (this.isShow) {
        this.$emit('change', this.color)
      }
    },
    w (v) {
      if (!this.isShow) {
        this.colors = v
      }
    }
  }
}
</script>

<style scoped>
.c-box {
  position: relative;
}
.vc-sketch {
  position:absolute;
  right: 0;
}
</style>
